<template>
  <view class="material-item">
    <image :src="item.image" mode="aspectFill" class="material-img"></image>
    <view class="material-info">
      <text class="title">{{item.title}}</text>
      <text class="desc">{{item.desc}}</text>
      <view class="action-bar">
        <text class="size">{{item.size}}</text>
        <button class="download-btn" @tap="handleDownload">下载</button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { computed } from 'vue'
import { FILE_TYPES, FILE_TYPE_NAMES, FILE_TYPE_ICONS } from '@/constants/distribution'

const props = defineProps({
  item: {
    type: Object,
    required: true
  }
})

const emit = defineEmits(['download'])

const fileType = computed(() => {
  return FILE_TYPES[props.item.type] || FILE_TYPES.OTHER
})

const fileTypeName = computed(() => {
  return FILE_TYPE_NAMES[fileType.value] || '其他'
})

const fileTypeIcon = computed(() => {
  return FILE_TYPE_ICONS[fileType.value] || FILE_TYPE_ICONS.OTHER
})

const handleDownload = () => {
  emit('download', props.item)
}
</script>

<style lang="scss">
.material-item {
  background-color: #FFFFFF;
  margin: 20rpx;
  padding: 20rpx;
  border-radius: 10rpx;
  
  .material-img {
    width: 100%;
    height: 300rpx;
    border-radius: 8rpx;
    margin-bottom: 20rpx;
  }
  
  .material-info {
    display: flex;
    flex-direction: column;
    
    .title {
      font-size: 32rpx;
      color: #333;
      font-weight: bold;
      margin-bottom: 10rpx;
    }
    
    .desc {
      font-size: 28rpx;
      color: #666;
      margin-bottom: 20rpx;
    }
    
    .action-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      .size {
        font-size: 24rpx;
        color: #999;
      }
      
      .download-btn {
        width: 160rpx;
        height: 60rpx;
        line-height: 60rpx;
        text-align: center;
        background-color: #D02B29;
        color: #FFFFFF;
        border-radius: 30rpx;
        font-size: 24rpx;
      }
    }
  }
}
</style> 